<template>
    <rx-dialog class="word-dialog-layout" :showcancel="false" :showok="false">
        <a-tabs default-active-key="formField" @change="callback" class="rx-a-tabs">
            <template v-for="item of fieldCodeConfig">
                <a-tab-pane :key="item.key" :tab="item.name" >
                    <div style="height: 100%;width: 100%;overflow: auto;">
                        <a-collapse class="rx-a-collapse" :defaultActiveKey="getDefKey(item.list)">
                            <template #expandIcon="props">
                                <a-icon type="caret-right" :rotate="props.isActive ? 90 : 0" />
                            </template>
                            <template v-for="row of item.list">
                                <a-collapse-panel :key="row.key">
                                    <template #header>
                                        <div>
                                    <span class="rx-panel-header" :class="row.key" v-if="['oneTable','subTable'].includes(row.key)">
                                        {{row.key === 'oneTable'?'一对一':'一对多'}}
                                    </span>
                                            <span class="rx-panel-text">{{row.name}}</span>
                                        </div>
                                    </template>
                                    <div class="grid-box">
                                        <div class="grid-header-row grid-row">
                                            <div class="grid-left">字段名称</div>
                                            <div class="grid-right">字段代码</div>
                                        </div>
                                        <div class="grid-row" v-for="code of row.list">
                                            <div class="grid-left">{{code.name}}</div>
                                            <div class="grid-right iconfont" @click="copy(code.field)">
                                                {{code.field}}
                                            </div>
                                        </div>
                                    </div>
                                </a-collapse-panel>
                            </template>
                        </a-collapse>
                    </div>

                </a-tab-pane>
            </template>
        </a-tabs>
    </rx-dialog>
</template>

<script>
import { RxDialog } from "@lowcode/jpaas-common-lib"
export default {
    name: "FormWordFieldComparisonTable",
    components:{
        RxDialog
    },
    data(){
        return {
            fieldCodeConfig:[
                {
                    name:'表单字段',
                    key:'formField',
                    list:[
                        {
                            name:'当前表单',
                            key:'currentForm',//当前表单-主表
                            list:[
                                {name:'合同编号', field:'htbh'},
                                {name:'合同名称', field:'htmc'},
                                {name:'合同标题', field:'htbt'},
                            ]
                        },
                        {
                            name:'订单产品',
                            key:'oneTable',//一对一子表
                            list:[
                                {name:'产品名称', field:'cpmc'},
                                {name:'规格属性', field:'ggsx'},
                                {name:'单位', field:'dw'},
                            ]
                        },
                        {
                            name:'物流信息',
                            key:'subTable',//一对多子表
                            list:[
                                {name:'物流名称', field:'wlmc'},
                            ]
                        },
                    ]
                },
                {
                    name:'系统字段',
                    key:'systemField',
                    list:[
                        {
                            name:'订单产品',
                            key:'oneTable',
                            list:[
                                {name:'产品名称', field:'cpmc'},
                                {name:'规格属性', field:'ggsx'},
                                {name:'单位', field:'dw'},
                            ]
                        }
                    ]
                },
                {
                    name:'流程相关',
                    key:'flowField',
                    list:[
                        {
                            name:'物流信息',
                            key:'subTable',
                            list:[
                                {name:'物流名称', field:'wlmc'},
                            ]
                        }
                    ]
                }
            ]
        }
    },
    methods:{
        copyText(textToCopy) {
            if(navigator.clipboard && navigator.clipboard.writeText){
                return navigator.clipboard.writeText(textToCopy)
            }else {
                // 创建textarea
                let textArea = document.createElement("textarea");
                textArea.value = textToCopy;
                // 使textarea不在viewport，同时设置不可见
                textArea.style.position = "fixed";
                textArea.style.opacity = 0;
                textArea.style.left = "-999999px";
                document.body.appendChild(textArea);
                textArea.focus();
                textArea.select();
                return new Promise((res, rej) => {
                    // 执行复制命令并移除文本框
                    document.execCommand('copy') ? res() : rej();
                    textArea.remove();
                });
            }
        },
        copy(field){
            this.copyText(field).then(()=>{
                this.$message.success('复制成功')
            })
        },
        callback(){

        },
        getDefKey(list){
            if(list && list.length > 0){
                return list.map(item=>item.key)
            }
        }
    }
}
</script>

<style scoped>
.rx-panel-header{
    display: inline-flex;
    line-height: 24px;
    padding: 0 10px;
    border-radius: 4px;
    background: rgba(255, 125, 0, 1);
    color: #fff;
    margin-right: 8px;
}
.rx-panel-header.subTable{
    background: rgba(66, 133, 244, 1);
}
.rx-panel-text{
    font-weight: bold;
}
.rx-a-tabs{
    height: 100%;
    width: 100%;
}

.grid-box{
    border: 1px solid rgba(232, 232, 232, 1);
}

.grid-row{
    line-height: 40px;
    display: grid;
    grid-template-columns: 1fr 2fr;
    border-top: 1px solid rgba(232, 232, 232, 1);
}
.grid-box .grid-header-row{
    background: rgba(250, 250, 250, 1);
    border-top: 0;
}
.grid-right,
.grid-left{
    padding: 0 10px;
    position: relative;
}

.grid-right{
    border-left: 1px solid rgba(232, 232, 232, 1);
    cursor: pointer;
}
/*
e7c7
e6b4
*/
.grid-row:not(.grid-header-row) .grid-right:hover:before{
    content: "\e7c7 复制 ";
    position: absolute;
    text-align: center;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(66, 133, 244, 0.2);
    border: 1px solid rgba(66, 133, 244, 1);
    color: rgba(66, 133, 244, 1);
}

.rx-a-collapse,
.rx-a-collapse >>> .ant-collapse-item,
.rx-a-collapse >>> .ant-collapse-content{
    border: none;
}
.rx-a-collapse >>> .ant-collapse-header{
    background-color: #fff;
    border: none;
}
.rx-a-tabs >>> .ant-tabs-content{
    height: calc( 100% - 44px );
}
.rx-a-tabs >>> .ant-tabs-bar{
    margin-bottom: 0;
}
.word-dialog-layout >>> .content-div{
    padding: 0;
}
</style>